<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('百度ECharts')"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <input placeholder="测试台名称" type="text" name="stationName"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="loadData()"><i
                                        class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="resetData()"><i
                                        class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-sm-12 select-table table-striped" style="height: 420px;">
        <div class="row" style="height: 100%;">
            <div class="col-sm-12" style="height: 100%;">
                <div class="ibox float-e-margins" style="height: 100%;">
                    <div class="ibox-content" style="height: 100%;">
                        <div class="echarts" id="echarts-pie-chart" style="height: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<script type="text/javascript">
    $(function () {
        loadData();
    });
    function resetData() {
        $.form.reset()
        loadData();
    }
    function loadData() {
        // 测试站名称
        let stationName = $("input[name='stationName']").val();
        // 配件名称
        var deviceNameArr = [];
        var dataArr = [];
        var sum = 0;
        // 条件参数
        var param = {};
        param.stationName = stationName;
        var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
        $.ajax({
            cache: true,
            type: "POST",
            url: ctx + "system/partsStatistic/partAndCountList",
            data: param,
            async: false,
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                console.log("data: " + JSON.stringify(data));
                if (data == null) {
                    return;
                }
                for (let i = 0; i < data.length; i++) {
                    deviceNameArr.push(data[i].device_name);
                    dataArr.push({value: data[i].count, name: data[i].device_name});
                    sum += data[i].count;
                }
                var pieoption = {
                    title: {
                        text: '配件统计',
                        x: 'center'
                    },
                    tooltip: {
                        formatter: function (params) {
                            return '<p>配件名称: ' + params.name + '</p><p>' + '数量: ' + params.value + '</p><p>' +
                                '占比: ' + (params.value / sum * 100).toFixed(2) + '%</p>';
                        },
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: deviceNameArr
                    },
                    calculable: true,
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: dataArr
                        }
                    ]
                };
                pieChart.setOption(pieoption);
                $(window).resize(pieChart.resize);
            }
        });
    }
</script>
</body>
</html>